<!DOCTYPE html>
<html lang="zh-cmn" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Xenon Boostrap Admin Panel" />
    <meta name="author" content="" />
    <title></title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{/css/fonts/linecons/css/linecons.css}"/>
    <link rel="stylesheet" th:href="@{/css/fonts/fontawesome/css/font-awesome.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{/css/xenon-core.css}"/>
    <link rel="stylesheet" th:href="@{/css/xenon-forms.css}"/>
    <link rel="stylesheet" th:href="@{/css/xenon-components.css}"/>
    <link rel="stylesheet" th:href="@{/css/xenon-skins.css}"/>
    <link rel="stylesheet" th:href="@{/css/custom.css}"/>
    <link rel="stylesheet" th:href="@{/css/sweetalert2.min.css}"/>
    <script type="application/javascript" th:src="@{/js/jquery-1.11.1.min.js}"></script>

</head>
<body class="page-body">
<script type="text/javascript" th:inline="javascript">
    var basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
</script>
<div class="settings-pane">
    <a href="#" data-toggle="settings-pane" data-animate="true">
        &times;
    </a>
    <div class="settings-pane-inner">
        <div class="row">
            <div class="col-md-4">
                <div class="user-info">
                    <div class="user-image">
                        <a href="#">
                            <img src="" class="img-responsive img-circle" />
                        </a>
                    </div>
                    <div class="user-details">
                        <h3>
                            <a href="">John Smith</a>
                            <span class="user-status is-online"></span>
                        </h3>
                        <p class="user-title">Web Developer</p>
                        <div class="user-links">
                            <a href="" class="btn btn-primary">Edit Profile</a>
                            <a href="" class="btn btn-success">Upgrade</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-8 link-blocks-env">
                <div class="links-block left-sep">
                    <h4>
                        <span>Notifications</span>
                    </h4>
                    <ul class="list-unstyled">
                        <li>
                            <input type="checkbox" class="cbr cbr-primary" checked="checked" id="sp-chk1" />
                            <label for="sp-chk1">Messages</label>
                        </li>
                        <li>
                            <input type="checkbox" class="cbr cbr-primary" checked="checked" id="sp-chk2" />
                            <label for="sp-chk2">Events</label>
                        </li>
                        <li>
                            <input type="checkbox" class="cbr cbr-primary" checked="checked" id="sp-chk3" />
                            <label for="sp-chk3">Updates</label>
                        </li>
                        <li>
                            <input type="checkbox" class="cbr cbr-primary" checked="checked" id="sp-chk4" />
                            <label for="sp-chk4">Server Uptime</label>
                        </li>
                    </ul>
                </div>
                <div class="links-block left-sep">
                    <h4>
                        <a href="#">
                            <span>Help Desk</span>
                        </a>
                    </h4>

                    <ul class="list-unstyled">
                        <li>
                            <a href="#">
                                <i class="fa-angle-right"></i>
                                Support Center
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fa-angle-right"></i>
                                Submit a Ticket
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fa-angle-right"></i>
                                Domains Protocol
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fa-angle-right"></i>
                                Terms of Service
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="page-container">
    <div class="main-content">
        <div class="page-title">
            <div class="title-env">
                <h1 class="title">商品 管理</h1>
                <p class="description">可以对商品进行一系列操作以及管理</p>
            </div>

            <div class="breadcrumb-env">

                <ol class="breadcrumb bc-1">
                    <li>
                        <a href="#"><i class="fa-home"></i>首页</a>
                    </li>
                    <li>
                        <a href="#">导航</a>
                    </li>
                    <li class="active">
                        <strong>商品管理</strong>
                    </li>
                </ol>

            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title" id="ck">商品管理</h3>
            </div>
            <div class="panel-body text-right">
                <a href="javascript:void(0);" class="btn btn-info btn-icon select">
                    <i class="fa-search"></i>
                    <span>查看详情</span>
                </a>
                <a href="#" class="btn btn-blue btn-icon update">
                    <i class="fa-wrench"></i>
                    <span>修改商品</span>
                </a>
                <a href="#" class="btn btn-secondary btn-icon add">
                    <i class="fa-fire"></i>
                    <span>添加商品</span>
                </a>

                <table class="table table-striped table-bordered" id="goods">
                    <thead>
                        <tr class="replace-inputs">
                            <th data-checkbox="true"></th>
                            <th data-field="goodsCode">商品编号</th>
                            <th data-field="goodsName">商品名称</th>
                            <th data-field="goodsShortTitle">商品短标题</th>
                            <th data-field="proSeries.proName">商品系列</th>
                            <th data-formatter="State" data-field="goodsState" data-events="optEvents">商品状态</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
<script type="application/javascript">
    function State(value){
        if(value == 0){
            return '<input name="state" type="checkbox" class="iswitch iswitch-secondary" />';
        }else{
            return '<input name="state" type="checkbox" checked class="iswitch iswitch-secondary"/>';
        }
    }

    window.optEvents={
        "click [name=state]":function (e,value,row) {
            var state = $(this);
            var check =state.prop("checked")
            if(check){
                state.prop("checked",false);
            }else{
                state.prop("checked",true);
            }
            swal({
                title: "是否修改状态?",
                text: "确定要对此商品修改状态?",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                confirmButtonClass: 'btn btn-success btn-lg',
                cancelButtonClass: 'btn btn-danger btn-lg',
                buttonsStyling: false
            }).then(function(isConfirm) {
                if (isConfirm === true) {
                    $.post(basePath+"/goodsBasicInfo/goodsBasicInfoupdate.html",
                        {"goodsBasicInfoId":row.goodsBasicInfoId,"goodsState":row.goodsState},
                        function (data) {
                        if(data=="success"){
                            swal(
                                '修改成功!',
                                '商品状态修改成功！',
                                'success'
                            );
                            if(check){
                                state.prop("checked",true);
                            }else{
                                state.prop("checked",false);
                            }
                        }else{
                            if(check){
                                state.prop("checked",false);
                            }else{
                                state.prop("checked",true);
                            }
                        }
                    });
                } else if (isConfirm === false) {
                    swal(
                        '修改取消！',
                        '您已取消商品修改!',
                        'success'
                    );
                    if(check){
                        state.prop("checked",false);
                    }else{
                        state.prop("checked",true);
                    }
                }
            })

        }
    };
    $(function () {
        initialProAttrNameTable();

        /**
         * 查看详情
         */
        $(".select").click(function () {
            var rows = $("#goods").bootstrapTable("getSelections");
            if(rows.length!=1){
                sweetAlert(
                    '错误',
                    '只能选择一项!',
                    'error'
                )
                return;
            }
            $(this).prop("href",basePath+"/goodsBasicInfo/goodsdetails.html?goodsBasicInfoId="+rows[0].goodsBasicInfoId);
        });
    });
    function initialProAttrNameTable() {
        var oTable = new TableInit();
        oTable.Init('goods','/goodsBasicInfo/goodsBasicInfo.html');
    }
</script>
<link rel="stylesheet" th:href="@{/js/datatables/dataTables.bootstrap.css}"/>
<script type="application/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="application/javascript" th:src="@{/js/TweenMax.min.js}"></script>
<script type="application/javascript" th:src="@{/js/resizeable.js}"></script>
<script type="application/javascript" th:src="@{/js/joinable.js}"></script>
<script type="application/javascript" th:src="@{/js/xenon-api.js}"></script>
<script type="application/javascript" th:src="@{/js/xenon-toggles.js}"></script>
<script type="application/javascript" th:src="@{/js/datatables/js/jquery.dataTables.js}"></script>
<script type="application/javascript" th:src="@{/js/datatables/dataTables.bootstrap.js}"></script>
<script type="application/javascript" th:src="@{/js/datatables/yadcf/jquery.dataTables.yadcf.js}"></script>
<script type="application/javascript" th:src="@{/js/datatables/tabletools/dataTables.tableTools.min.js}"></script>
<script type="application/javascript" th:src="@{/js/xenon-custom.js}"></script>
<script type="application/javascript" th:src="@{/js/bootstrap-table.js}"></script>
<script type="application/javascript" th:src="@{/js/bootstrap-table-zh-CN.js}"></script>
<script type="application/javascript" th:src="@{/js/public/dataTable.js}"></script>
<script type="application/javascript" th:src="@{/js/sweetalert2.min.js}"></script>
</body>
</html>